
<template>
    <div>
        <dv-full-screen-container class="screen-container">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body d-flex">
                <div class="head">
                    <p class="title">资产租赁-资产分析</p>
                </div>
                <div class="connBox">
                    <div class="container">
                        <img
                            class="scroll"
                            src="../../assets/xmhx/example.png"
                        />
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
export default {
    props: {},
    data() {
        return {
            loading: true
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.cancelLoading()
        // this.$nextTick(() => {
        //     let img = document.querySelector('.scroll')
        //     let container = document.querySelector('.container')
        //     let imgWidth = img.offsetWidth
        //     let containerWidth = container.offsetWidth
        //     setInterval(() => {
        //         let left = parseInt(img.style.left) || 0
        //         if (left <= -imgWidth + containerWidth) {
        //             left = 0
        //         }
        //         img.style.left = left - 1 + 'px'
        //     }, 12)
        // })
    },
    watch: {},
    methods: {
        cancelLoading() {
            setTimeout(() => {
                this.loading = false
            }, 2000)
        },
        closeUrl() {
            this.$router.push({
                path: '/'
            })
        }
    },
    beforeDestroy() {},
    components: {}
}
</script>

<style scoped lang="scss">
.screen-container {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    // height: 100vh;
    // 660
    height: 1053px !important;
    background-image: url('../../assets/home/boxbg.png');
    background-size: 100% 100%;
    background-position: center center;
    .host-body {
        width: 100%;
        height: 100%;
        padding: 100px 60px 60px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        justify-content: space-between;
        .head {
            width: 1571px;
            height: 136px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-image: url('../../assets/home/head.png');
            // background-size: cover;
            background-size: 100% 100%;
            background-position: center center;
            .title {
                font-size: 29px;
                text-align: center;
                font-weight: bold;
                color: #ffffff;
                line-height: 76px;
            }
        }
        .connBox {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 20px 0;
            box-shadow: 0 0 50px 20px rgba(92, 133, 215, 0.359) inset;
        }
        .container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .scroll {
        // animation: scroll 50s linear infinite;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-1700px);
        }
    }
}
</style>
